/*
 * @Author: along
 * @Date: 2019-12-16 20:11:36
 */

<template>
    <div class="container workPeter">
        <!-- head -->
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="fnAddPeter()"
                size="small">添加类目组
            </el-button>
            <div class="operation-content">
                <p class="operation-container-title">类目组名称:</p>
                <el-input
                    v-model="peter_name"
                    placeholder="请输入类目组名称"
                    suffix-icon="el-icon-search"
                    size="small"
                    clearable
                    @clear="getTableData()"
                    @change="fnFilter(1)"
                    @keyup.native.enter="fnFilter(1)"
                />
            </div>
        </div>
        <!-- /head -->

        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    @sort-change="handleSortChanged"
                >
                    <el-table-column
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        show-overflow-tooltip
                        label="类目组名称"
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="type_count"
                        show-overflow-tooltip
                        label="一级分类"
                        :formatter="emptyFormatter"
                        align="center"
                        sortable
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.type_count !== null "
                                class="cursor-font"
                                @click="fnShowSimple(scope.row)"
                            >{{ scope.row.type_count }}</span>
                            <span
                                v-else
                            >--</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="course_count"
                        show-overflow-tooltip
                        label="视频数量"
                        :formatter="emptyFormatter"
                        align="center"
                        sortable
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.course_count !== null "
                                class="cursor-font"
                                @click="fnJumpVideo(scope.row)"
                            >{{ scope.row.course_count }}</span>
                            <span
                                v-else
                            >--</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.create_time">{{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</template>
                            <template v-else>--</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        :width="140"
                        fixed="right"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnEditClassify(scope.row)">编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    @click="fnDelMaterial(scope.row)">
                                    删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 一级分类 -->
        <el-dialog
            :visible.sync="centerDialogVisible"
            width="500px"
            center
        >
            <div class="el-dialog-box">
                <div
                    v-for="(item,index) in linkList"
                    :key="index"
                    class="el-dialog-list"
                >
                    <p>{{ index+1 }}</p>
                    <p>{{ item.aim_title }}</p>
                    <p>
                        <span
                            class="cursor-font"
                            v-if="item.status"
                            @click="fnRemove(item)"
                        >移除</span>
                        <span
                            v-if="!item.status"
                            class="cursor-font"
                            @click="fnRelMove(item)"
                        >关联</span>
                    </p>
                </div>
            </div>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    type="primary"
                    @click="fnlinkSave()"
                    size="small"
                >保存</el-button>
                <el-button
                    @click="centerDialogVisible = false"
                    size="small"
                >取 消</el-button>
            </span>
        </el-dialog>
        <!-- /一级分类 -->

        <!-- 添加分组页弹窗 -->
        <el-dialog
            title="添加类目组"
            width="520px"
            :visible.sync="dialogAddVisible"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="90px"
                class="demo-ruleForm">
                <el-form-item
                    label="组名称"
                    prop="cate_name">
                    <el-input
                        v-model="ruleForm.cate_name"
                        class="add-dialog-input"
                        size="small"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="dialogAddVisible = false"
                    size="small"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加分组页弹窗 -->
    </div>
</template>

<script>
/**
 * @param   {Object}    authResult                  //页面权限
 * @param   {Array}     tableData                   //表格数据
 * @param   {Object}    page                        //分页
 * @param   {Boolean}   dialogAddVisible            //弹窗开关
 * @param   {Object}    ruleForm                    //弹窗字段
 * @param   {Object}    rules                       //弹窗字段
 * @param   {String}    peter_name                  //金刚区名称
 * @param   {Object}    filterData                  //排序
 * @param   {String}    type_popup                  //打开弹窗类型-编辑/添加
 * @param   {String}    cate_no                     //分组编号,用于编辑
 * @param   {Boolean}   centerDialogVisible         //一级分类弹窗开关
 */
export default {
    data() {
        return {
            linkList: [],
            centerDialogVisible: false,
            cate_no: '',
            type_popup: '',
            authResult: {},
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            dialogAddVisible: false,
            ruleForm: {
                cate_name: ''
            },
            rules: {
                cate_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ]
            },
            peter_name: '',
            filterData: {
                sort_field: 0,
                sort_type: 0
            },
        };
    },
    watch: {
        dialogAddVisible (val) {
            if (!val) {
                this.ruleForm = {
                    cate_name: ''
                };
                this.$refs['ruleForm'].resetFields();
            }
        }
    },
    mounted() {
        this.authResult = this.$route.meta.authResult;
        this.setHeader();
        this.getTableData();
    },
    methods: {
        /**
         * 设置heade
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{title: "APP后台",},{title: '学习'},{title: '类目组'}]);
        },

        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/student/course_cate%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                }
            });
        },

        /**
         * 名称搜索
         */
        fnFilter () {
            let list = [];
            let data = JSON.parse(JSON.stringify(this.tableData));

            data.map(item=>{
                if(item.title.indexOf(this.peter_name) > -1) {
                    list.push({
                        cate_no: item.cate_no,
                        title: item.title,
                        create_time: item.create_time,
                        type_count: item.type_count,
                        course_count: item.course_count
                    });
                }
            });

            this.tableData = list;
        },

        /**
         * 添加分类
         */
        fnAddPeter () {
            this.type_popup = 'addCategory';
            this.dialogAddVisible = !this.dialogAddVisible;
        },

        /**
         * 编辑
         */
        fnEditClassify(row) {
            this.type_popup = 'editCategory';
            this.ruleForm.cate_name = row.title;
            this.cate_no = row.cate_no;
            this.dialogAddVisible = !this.dialogAddVisible;
        },

        /**
         * 弹窗确认提交数据
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.type_popup == 'addCategory') {
                        this.$post('/student/course_cate%5Cadd', {
                            title: this.ruleForm.cate_name
                        }, resp => {
                            if (resp.code == 1) {
                                this.getTableData();
                                this.dialogAddVisible = !this.dialogAddVisible;
                                this.$message({
                                    type: 'success',
                                    message: '添加成功',
                                    center: true
                                });
                            }else{
                                this.$message({
                                    type: 'warning',
                                    message: resp.msg,
                                    center: true
                                });
                            }
                        });
                    } else if (this.type_popup == 'editCategory') {
                        this.$post('/student/course_cate%5Cset', {
                            cate_no: this.cate_no,
                            title: this.ruleForm.cate_name
                        }, resp => {
                            if (resp.code == 1) {
                                this.getTableData();
                                this.dialogAddVisible = !this.dialogAddVisible;
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功',
                                    center: true
                                });
                            }else{
                                this.$message({
                                    type: 'warning',
                                    message: resp.msg,
                                    center: true
                                });
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },

        /**
         * 删除
         */
        fnDelMaterial(row) {
            this.$confirm('此操作将删除该类目组, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/course_cate%5Cdelete', {
                    cate_no: row.cate_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 排序
         * @param   {Object}    sortTypeMap     //asc:降序 desc：升序
         * @param   {Object}    sortFieldMap    //排序字段
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 'asc',
                descending: 'desc'
            };

            let sortFieldMap = {
                cate_one: 'cate_one',
                video_num: 'video_num'
            };

            if (sortTypeMap[data.order] == 'asc' && sortFieldMap[data.prop] == 'cate_one' || sortFieldMap[data.prop] == 'video_num') {
                this.sortTableDate('min', sortFieldMap[data.prop]);
            } else if (sortTypeMap[data.order] == 'desc' && sortFieldMap[data.prop] == 'cate_one' || sortFieldMap[data.prop] == 'video_num') {
                this.sortTableDate('max', sortFieldMap[data.prop]);
            }

            this.getTableData();
        },

        /**
         * 排序函数
         * @param   {String}    param   //max:升序  min:降序
         */
        sortTableDate (param,field) {
            let data = JSON.parse(JSON.stringify(this.tableData));

            if (param == 'max') {
                data.sort((a,b)=>{
                    return a.field - b.field;
                });
                this.tableData = data;
            } else if (param == 'min') {
                data.sort((a,b)=>{
                    return b.field - a.field;
                });
                this.tableData = data;
            } else {
                return;
            }
        },

        /**
         * 查看一级类目弹窗
         */
        fnShowSimple (row) {
            this.cate_no = row.cate_no;
            this.$post('/student/course_cate%5Cget_link_list', {
                cate_no: row.cate_no
            }, resp => {
                if (resp.code == 1) {
                    this.linkList = [];
                    resp.data.list.map(item=>{
                        this.linkList.push({
                            aim_type: item.aim_type,
                            aim_no: item.aim_no,
                            aim_title: item.aim_title,
                            status: true
                        });
                    });
                    this.centerDialogVisible = !this.centerDialogVisible;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 移除
         */
        fnRemove (row) {
            this.$set(row,'status',false);
        },

        /**
         * 取消移除
         */
        fnRelMove (row) {
            this.$set(row,'status',true);
            // this.$post('/student/course_cate%5Cset_link', {
            //     cate_no: this.cate_no,
            //     aim_type: row.aim_type,
            //     aim_no: row.aim_no
            // }, resp => {
            //     if (resp.code == 1) {
            //         this.$message({
            //             type: 'success',
            //             message: '关联成功',
            //             center: true
            //         });
            //     } else {
            //         this.$message({
            //             type: 'warning',
            //             message: resp.msg,
            //             center: true
            //         });
            //     }
            // });
        },

        /**
         * 保存
         */
        fnlinkSave () {
            this.linkList.map(item=>{
                if (!item.status) {
                    this.$post('/student/course_cate%5Cunset_link', {
                        cate_no: this.cate_no,
                        aim_type: item.aim_type,
                        aim_no: item.aim_no
                    }, resp => {
                        if (resp.code == 1) {
                            //
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                }
            });
            this.centerDialogVisible = !this.centerDialogVisible;
            this.$message({
                type: 'success',
                message: '保存成功',
                center: true
            });
            setTimeout(()=>{
                this.getTableData();
            },150);
        },

        /**
         * 跳转视频列表
         */
        fnJumpVideo (row) {
            this.$router.replace({
                name: 'StudyList',
                query: {
                    cate_no: row.cate_no
                }
            });
        },


        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val || val === null) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
}
.add-dialog-input{
    width: 350px;
}
.operation-wrapper {
    display: flex;
    background-color: #fff;
    height: 32px;
    align-items: center;
    margin-top: 10px;
    .select-container{
        flex: 1;
    }
    .el-button {
        float: right;
        margin-left: 10px;
    }
    .operation-content {
        display: flex;
        height: 32px;
        align-items: center;
        margin-left: 30px;
        .operation-container-title {
            color: #606266;
            white-space: nowrap;
            margin-right: 3px;
        }
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
    .sub-logo{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .num-active {
        color:#FF0000;
    }
}
.pagination-wrapper {
    padding-bottom: 10px;
    .el-pagination {
        float: right;
        margin-right: 20px;
        padding: 0;
        background-color: transparent;
    }
}
/* 字体高亮 */
.cursor-font {
    color: rgb(64, 158, 255);
    cursor: pointer;
}
/* 排序 */
.sort-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    .sort-spliter {
        width: 1px;
        height: 12px;
        background: rgba(235, 235, 235, 1);
        margin: 0 10px;
        }
        .btn-sort {
        font-size: 14px;
        line-height: 1;
        color: #ccc;
        &:hover {
            color: #20a0ff;
        }
    }
}
.el-dialog-box {
    max-height: 270px;
    overflow: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 3px;
    }
    .el-dialog-list {
        display: flex;
        margin: 0 0 25px 30px;
        width: 300px;
        justify-content: space-between;
    }
}
</style>
<style lang="less">
.workPeter {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
            justify-content: center;
        }
    }
    .upload-good-image{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        display: flex;
        border: 1px dashed #d9d9d9;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        color: #8c939d;
        img{
            width: 100px;
            height: 100px;
        }
    }
}
</style>
